<template>
	<SecondTitle title="资讯信息发送量占比" />
	<div class="pipe">
		 <ProportionPipe1 v-if="chartData.length>0" :data="chartData" :chartType="1" :legendLineHeight="40" />
		<!-- <ProportionPipe1 v-if="chartData.length>0" charType="1" :data="chartData" :legendLineHeight="40" /> -->
	</div>
</template>
<script lang="ts" setup>
	import { resetSize } from '@/utils/reset'
	import { ref, onMounted } from 'vue'
	import ProportionPipe1 from './ProportionPipe1.vue'
	import { requireImg } from '@/utils/common'
	import * as echarts from 'echarts'
	import { getDistribut } from '@/api/train'
  import { getMessageStatistical } from '@/api/dataManage'
	import dayjs from 'dayjs'

	const list: any = ref();
	const colorArr: any = ref([
		{
			color1: "rgba(15, 84, 153, 0.396)",
			color2: "rgba(115, 208, 255, 1)"
		},
		{
			color1: "rgba(77, 255, 181, 1)",
			color2: "rgba(11, 77, 44, 1)"
		},
		{
			color1: "rgba(229, 229, 229, 1)",
			color2: "rgba(117, 117, 117, 1)"
		},
		{
			color1: "rgba(255, 200, 89, 1)",
			color2: "rgba(153, 105, 38, 1)"
		},
		{
			color1: "rgba(255, 77, 89, 1)",
			color2: "rgba(153, 117, 38, 1)"
		}
	]);
	const item: any = ref({
		"taxiCount": 88,
    "busCount": 66,
    "rideHailingCount": 44,
    "subwayCount": 22
	});
	const chartData: any = ref([])


	onMounted( async () => {
		let params = {
			startTime: dayjs(new Date()).format('YYYY-MM-DD'),
			endTime: dayjs(new Date()).format('YYYY-MM-DD')
		}
		await getMessageStatistical(params).then((res: any) => {
			// list.value = res.data.records;
      list.value = res.data.data;
			list.value.forEach((deviceItem: any, index: any) => {
				console.log("colorArr.value[index]", colorArr.value[index])
				let newIndex = colorArr.value.length > index ? index : index%colorArr.value.length;
				let dItem = {
					value: deviceItem.count,
					name: deviceItem.name,
					icon: 'image://' + requireImg('global/pipe-legend1.png'),
					itemStyle: {
						color: new echarts.graphic.LinearGradient(
							1,
							0,
							0,
							0,
							[
								{
									offset: 0,
									color: colorArr.value[newIndex].color1,
								},
								{
									offset: 1,
									color: colorArr.value[newIndex].color2,
								},
							],
							false,
						), // 渐变
					},
				}
				console.log("dItem====", dItem)
				chartData.value.push(dItem);
			});
		
		})
	})
</script>

<style lang="scss" scoped>
	.pipe {
		margin-top: 100px;
	}
</style>
